<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../React-js/react.development.js"></script>
<!--引入reac-dom 用于支持react操作dom-->
<script src="../React-js/react-dom.development.js"></script>
<!--引入babel 用于讲jsx语法转js语法-->
<script src="../React-js/babel.min.js"></script>
<script type="text/babel">
    class Form extends React.Component {
        //初始化内容
        state = {
            user_login: '',
            user_password: ''
        }

        /**
         * 柯里化函数 ，调用一个函数，函数返回一个函数，统一处理结果，这种就做柯里化
         * @param field
         * @returns {(function(*): void)|*}
         */
        saveForm(field) {
            return e => {
                this.setState({
                    [field]: e.target.value
                })
            }
        }

        //监听表单提交
        handleSubmit = (e) => {
            e.preventDefault() //阻止跳转
            console.log(this.state)
        }

        render() {
            return (
                <form>
                    <input type="text" placeholder="请输入账号"
                           onChange={this.saveForm('user_login')}
                    />
                    <input type="password" placeholder="请输入密码"
                           onChange={this.saveForm('user_password')}
                    />
                    <button onClick={this.handleSubmit}>提交</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Form/>, document.getElementById('app'))
</script>
</body>
</html>